<template>
	<view class="p-3 flex align-start border-bottom border-light-secondary">
		<free-avater :src="item.avatar" size="80"></free-avater>
		<view class="pl-2 flex flex-1 flex-column">
			<!-- 昵称 -->
			<text class="font-md text-hover-primary">{{ item.username }}</text>
			<!-- 内容 -->
			<text class="font-md text-dark mb-1">{{ item.context }}</text>
			<!-- 图片 -->
			<view class="py-2 flex flex-wrap">
				<block v-for="(image, imageIndex) in item.image" :key="imageIndex">
					<!-- 单图 -->
					<free-image
						v-if="item.image.length === 1"
						:src="image.src"
						imageClass="rounded"
						@click="preview(image.src)"
					></free-image>
					<!-- 多图 -->
					<image
						v-else
						:src="image.src"
						@click="preview(image.src)"
						mode="aspectFill"
						class="bg-secondary mr-2 mb-2 rounded"
						style="height: 180rpx; width: 180rpx; "
					></image>
				</block>
			</view>
			<!-- 视频 -->
			<view v-if="item.video" class="py-2">
				<video
					:src="item.video.src"
					:poster="item.video.poster"
					loop
					controls
					style="width: 500rpx;height: 300rpx;"
				></video>
			</view>
			<!-- 时间|操作 -->
			<view class="flex align-center justify-between">
				<text class="font-sm text-light-muted">{{ item.create_time | formatTime }}</text>
				<view
					@click="
						$emit('action', {
							item,
							index
						})
					"
					class="rounded p-1 bg-light"
				>
					<text class="text-hover-primary iconfont font">&#xe62a;</text>
				</view>
			</view>

			<!-- 点赞列表|评论列表 -->
			<view v-if="item.supports.length || item.comments.length" class="bg-light mt-2">
				<!-- 点赞 -->
				<view v-if="item.supports.length" class="border-bottom flex align-start p-2 justify-start">
					<view class="flex-shrink flex align-start justify-start">
						<text class="iconfont  font text-hover-primary">&#xe637;</text>
					</view>
					<view class="flex  flex-wrap  flex-1 ml-1 " style="flex-grow: 1;">
						<block v-for="(s, si) in item.supports" :key="si">
							<text class=" font text-hover-primary ml-1">{{ s.username }}</text>
						</block>
					</view>
				</view>
				<!-- 评论 -->
				<view v-if="item.comments.length" class="flex align-start p-2">
					<text class="iconfont flex-shrink  font-md text-hover-primary">&#xe64e;</text>
					<view class="flex flex-1 ml-2 flex-column">
						<view class="flex " v-for="(c, ci) in item.comments">
							<text class="text-hover-primary font">{{ c.username }}：</text>
							<text class="font text-dark flex-1">{{ c.content }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import freeAvater from '@/components/free-ui/free-avater.vue';
import freeImage from '@/components/free-ui/free-image.vue';
import $T from '@/common/free-lib/time.js';
export default {
	components: {
		freeAvater,
		freeImage
	},
	props: {
		item: {
			type: Object,
			default: {}
		},
		index: {
			type: Number,
			default: null
		}
	},
	data() {
		return {};
	},
	filters: {
		formatTime(value) {
			return $T.gettime(value);
		}
	},
	computed: {
		imageList() {
			let imageList = [];
			this.item.image.forEach(item => {
				imageList.push(item.src);
			});
			return imageList;
		}
	},
	methods: {
		// 预览大图
		preview(src) {
			console.log('我被点击了');
			uni.previewImage({
				current: src,
				urls: this.imageList,
				indicator: 'default'
			});
			// uni.previewImage({
			// 	current: src,
			// 	urls: this.item.image
			// })
		}
	}
};
</script>

<style></style>
